﻿<!DOCTYPE HTML>
<html>
<head>
    <title>table</title>
    <link href="css/Excel.css" rel="stylesheet" />
    <script src="../js/vue.min.js"></script>
    <script src="Excel.js"></script>
</head>
<body>
    <script type="text/x-template" id="grid-template">
        <table style="border-spacing:0;table-layout:fixed;width:800px;">
            <tr>
                <td class="Cell HeadCell USNone"></td>
                <td class="Cell HeadCell USNone" v-for="c in 10">
                    {{Excel.PubFun.convert26(c)}}
                </td>
            </tr>
            <tr v-for="r in 10">
                <td class="Cell HeadCell USNone">
                    {{r}}
                </td>
                <td class="Cell" v-for="c in 10" v-on:mousedown="mouseDownCellHandle(r,c,$event)" v-on:dblclick="doubleClickCellHandle(r,c,$event)" >
                    {{(data.WorkSheets[0].Rows[r]&&data.WorkSheets[0].Rows[r].Cells[c])?data.WorkSheets[0].Rows[r].Cells[c].Data.Value:""}}
                </td>
            </tr>
        </table>
    </script>
    <!-- demo root element -->
    <div id="demo">
        <demo-grid :data="excelData">
        </demo-grid>
    </div>
    <script>
        Vue.component('demo-grid', {
            template: '#grid-template',
            props: {
                data: Object
            },
            methods: {
                mouseDownCellHandle: function (r,c) {
                    //alert((this.data.WorkSheets[0].Rows[r] && this.data.WorkSheets[0].Rows[r].Cells[c]) ? this.data.WorkSheets[0].Rows[r].Cells[c].Data.Value : "")
                },
                doubleClickCellHandle: function (r, c, e) {
                    console.log(event);
                    e.target.contentEditable = true;
                    e.target.className = "Cell USText";
                    e.target.focus();
                }
            }
        });
        var demo = new Vue({
            el: '#demo',
            data: excelData,
            update: function () {

            }
        });
    </script>


</body>
</html>